<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
  <!--   <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style_dz.css" /> -->
    <title>定制-笔飞美术作品</title>
    <%@include file="../common/js.jsp"%>
    <%@include file="../common/jspcommon.jsp"%>
<%@include file="../common/css.jsp"%>

  <link rel="stylesheet" type="text/css" href="/css/style_dz.css" />
   

    <script type="text/javascript">
        $(function(){
	        $('.has-tooltip').tooltip({position: "top center", offset:[35, 0], relative: true, effect: 'slide'});
	        mpq.track('Front Page Viewed', {'user-type' : 'anonymous'});
	        $('.front-main-gallery-thumb').hover(function(){
		        $(this).css('opacity','1.0');
	        }, function(){
		        if ($(this).hasClass('faded')){
			        $(this).css('opacity','0.5');
		        }
	        })
	        $('.front-main-gallery-thumb').click(function(){
		        var thumbID = $(this).attr("id");
		        var nextNum = thumbID.charAt(thumbID.length-1);
    			
		        $(document).stopTime();
    			
		        NextMainImage(nextNum);
	        })
	        $(document).everyTime(3500, function(i) {
		        var thumbID = $('.front-main-gallery-thumb:not(.faded)').attr("id");
		        var num = thumbID.charAt(thumbID.length-1);
		        var nextNum;
		        if (num == 6) {
			        nextNum = 1;
		        } else {
			        nextNum = parseInt(num) + 1;
		        }
		        NextMainImage(nextNum);
	        })
	        $('#front-about-button').click(function(){
		        $('html, body').animate({
	                 scrollTop: $("#front-divider").offset().top
	             }, 500);
	        })
        })
    	
        function NextMainImage(nextNum) {
	        var currentThumb = $('.front-main-gallery-thumb:not(.faded)');
	        var nextThumb = $('#front-thumb-'+nextNum);
    		
	        var currentMain = $('.front-main-image:not(.hidden)');
	        var nextMain = $('#main-image-'+nextNum);
    		
	        currentThumb.addClass('faded').css('opacity','0.5');
	        nextThumb.removeClass('faded').css('opacity','1.0');
    		
	        currentMain.fadeOut('slow', function(){
		        $(this).addClass("hidden");
	        });
	        nextMain.fadeIn('slow').removeClass('hidden');	
        }
    </script>
</head>
<body>
<div id="box">
    <%@include file="../common/header.jsp" %>
    <div id="main_div">
        <div class="site_map"><a href="/welcome.htm">首页</a> 》定制</div>
        
        <div id="dz_div_1">
                
	        <div id="front-top-container">
		        <div id="front-main-frame">
				    <c:forEach items="${LbList }" var="list" varStatus="v">
				         <a href="${list.link}" ><img id="main-image-${v.count}" class="front-main-image" src="${list.picture}" alt="" width="598px;" height="458px"/></a>
			       	</c:forEach>
		        </div>
        		
		        <div id="front-main-right-container">
                    <p class="style4 mt10">创造一个属于你的艺术</p>
                    <p class="style5 mt10">让它来点缀你的生活</p>
                    <p class="mt40"><a href="flow.htm"><img src="../images/btn_gzlc.jpg" alt=""/></a></p>
        			
        			<div id="front-main-gallery-container">
        			<ul>
				       <c:forEach items="${LbList }" var="lists" varStatus="s">
				        <li><img id="front-thumb-${s.count }" class="front-main-gallery-thumb" src="${lists.pictureT}" /></li>
        				</c:forEach>
        				</ul>
        			</div>
                    <p class="style5 more1"><a href="niceist.htm">更多推荐</a></p>
		        </div>
	        </div>
        </div>
        
        <div class="line"></div>
        
        <div id="dz_div_2">
            <div class="dz_div_2_l">
                <p class="style4">${leftContent.title }</p>
                <p class="mt10">${leftContent.description}</p>
                <p class="mt20"><a href="martist.htm"><img src="../images/btn_xz.jpg" alt=""/></a></p>
            </div>
            <div class="dz_div_2_r">
                <div class="pic_list2">
                    <ul class="topnav">
                        <c:forEach items="${upList}" var="up">
                      	  <li><a href="${up.link}"><img src="${up.picture }" alt=""/></a><ul class="subnav"><li><p>${up.title}</p></li></ul></li>
                    	</c:forEach>
                    </ul>
                </div>
                <script type="text/javascript">
                $(document).ready(function(){
	                $("ul.topnav li a").hover(function() {
		                $(this).parent().find("ul.subnav").show();
		                $(this).parent().hover(function() {
		                }, function(){
			                $(this).parent().find("ul.subnav").hide();
		                });
		                })
                });
                </script>                
            </div>
        </div>
         <%@include file="../common/footer.jsp" %>
    </div>
    
    
</div>

</body>
	<!-- start Mixpanel -->
	<script type="text/javascript">
		var mpq=[];mpq.push(["init","b92b4fb8e55776a86019695853d57cbb"]);(function(){var b,a,e,d,c;b=document.createElement("script");b.type="text/javascript";b.async=true;b.src=(document.location.protocol==="https:"?"https:":"http:")+"//api.mixpanel.com/site_media/js/api/mixpanel.js";a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(b,a);e=function(f){return function(){mpq.push([f].concat(Array.prototype.slice.call(arguments,0)))}};d=["init","track","track_links","track_forms","register","register_once","identify","name_tag","set_config"];for(c=0;c<d.length;c++){mpq[d[c]]=e(d[c])}})();
		
	</script><!-- end Mixpanel -->


</html>
